import React, { Component } from 'react';
import { getMvxiangqing, pdCollect, addCollect, deleteCollect, addComment, getComment } from '../../utils/api';
import { bus } from '../../utils/eventBus';
import '../../style/all.css';
import './MvDetail.css';

export default class MvDetail extends Component {
	state = {
		// mv详细信息
		mvDetail: {},
		// 是否已收藏
		isCollected: false,
		editor: null,
		// 评论列表
		commentList: []
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getMvs();
		// 初始化editor
		const E = window.wangEditor;
		const editor = new E(".fb");
		editor.config.height = 150;
		editor.config.menus = [];
		editor.create();
		this.setState({
			editor: editor
		});
	}
	// 继续播放音乐
	componentWillUnmount () {
		bus.emit('syplay2', 'play');
	}
	// 发表评论
	async comment (mvid) {
		let { editor } = this.state;
		if (editor.txt.text().trim().length === 0) {
			window.alert('评论不能为空！');
			return;
		}
		let userid = Number(window.sessionStorage.getItem('userid'));
		let addC = await addComment(userid, 2, mvid, this.state.editor.txt.text(), new Date().toLocaleString());
		if (addC.status === 0) {
			editor.txt.clear();
			// 刷新评论
			this.getComments(mvid);
		} else {
			window.alert(addC.message);
		}
	}
	// 判断是否已收藏
	async pdCollects (mvid) {
		let userid = Number(window.sessionStorage.getItem('userid'));
		let isFlag = await pdCollect(userid, 2, mvid);
		if (isFlag.status !== 1) {
			this.setState({
				isCollected: true
			})
		}
	}
	// 获取mv详细信息
	async getMvs () {
		let { search } = this.props.location;
		let mvId = search.split('=')[1];
		let mvDetail = await getMvxiangqing(mvId);
		this.setState({
			mvDetail: mvDetail.data[0]
		}, function () {
			// 判断收藏
			this.pdCollects(this.state.mvDetail.mvid);
			// 获取评论
			this.getComments(this.state.mvDetail.mvid);
		})
	}
	// 获取评论
	async getComments (mvid) {
		let commentList = await getComment(2, mvid);
		if (commentList.status === 0) {
			this.setState({
				commentList: commentList.data
			})
		}
	}
	// 添加或删除收藏
	async addOrDeleteCollects (mvid) {
		let userid = Number(window.sessionStorage.getItem('userid'));
		if (this.state.isCollected) {
			// 取消收藏
			let delC = await deleteCollect(userid, 2, mvid);
			if (delC.status === 0) {
				window.alert(delC.message);
				this.setState({
					isCollected: false
				})
			} else {
				window.alert(delC.message);
			}
		} else {
			// 添加收藏
			let addC = await addCollect(userid, 2, mvid);
			if (addC.status === 0) {
				this.setState({
					isCollected: true
				})
			} else {
				window.alert(addC.message);
			}
		}
	}
	render () {
		let { isCollected, commentList } = this.state;
		let { mv_pic_url, mv_name, singer_name, mv_file, mv_url, mvid } = this.state.mvDetail;
		return (
			<div className='mvdetail main'>
				<div className='left'>
					<div className='back red' onClick={() => { this.props.history.goBack(); }}>&lt;返回</div>
					<h2>MV详情</h2>
					<div className='video_box'>
						<video onCanPlay={() => { bus.emit('sypause', 'pause'); }} src={mv_file == null ? mv_url : "http://localhost:3001/" + mv_file} poster={mv_pic_url} autoPlay controls width='700' height='400'></video>
					</div>
					<div className='mvtt'>
						<h2>{mv_name}</h2>
						<span>{singer_name}</span>
						<div onClick={() => this.addOrDeleteCollects(mvid)} className='addCollect mv_a'>{!isCollected ? "添加收藏" : "取消收藏"}</div>
					</div>
				</div>
				<div className='comment'>
					<div className='fb'></div>
					<div className='dianjifb' onClick={() => this.comment(mvid)}>发表评论</div>
					<h2>评论列表({commentList.length})</h2>
					<ul>
						{commentList.map((item) => (
							<li key={item.commentid}>
								<div className='ava'>
									<img width="100%" height="100%" src={"http://localhost:3001/" + item.user_avator_url} alt="" />
								</div>
								<div className='comment_content'>
									<span>{item.user_nickname}</span>
									<p>
										{item.comment_content}
									</p>
									<span>{item.comment_create_time}</span>
								</div>
							</li>
						))}
					</ul>
				</div>
			</div>
		)
	}
}
